import React, { useState, useEffect } from 'react';
import { Table, Button, Space, Modal, Form, Input, Select, message, Popconfirm, Tag } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import request from '@/utils/request';
import UserTable from '@/pages/Settings/UserManagement/components/UserTable';
import UserDrawer from '@/pages/Settings/UserManagement/components/UserModal';
import { User } from '@/pages/Settings/UserManagement/types';
import { useUserManagement } from '@/pages/Settings/UserManagement/hooks';

const { Option } = Select;

const UserManagement: React.FC = () => {
  const {
    users, loading, modalVisible, editingUser, form, searchForm, pagination,
    setModalVisible, setEditingUser, fetchUsers, handleSubmit, handleDelete,
    handleQuery, handleReset, handleTableChange
  } = useUserManagement();
  const { t } = useTranslation();

  return (
    <div className="user-management">
      <div className="page-header">
        <h2>{t('userManagement.title')}</h2>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditingUser(null);
            form.resetFields();
            setModalVisible(true);
          }}
        >
          {t('userManagement.addUser')}
        </Button>
      </div>
      <Form
        form={searchForm}
        layout="inline"
        onFinish={handleQuery}
        style={{ marginBottom: 16 }}
      >
        <Form.Item name="search" label="关键词">
          <Input placeholder="用户名/邮箱/手机号" allowClear />
        </Form.Item>
        <Form.Item name="status" label="状态">
          <Select allowClear style={{ width: 120 }}>
            <Option value="active">启用</Option>
            <Option value="inactive">禁用</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">查询</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      <UserTable
        users={users}
        loading={loading}
        pagination={pagination}
        onChange={handleTableChange}
        onEdit={(user) => {
          setEditingUser(user);
          form.setFieldsValue(user);
          setModalVisible(true);
        }}
        onDelete={handleDelete}
      />
      <UserDrawer
        visible={modalVisible}
        editingUser={editingUser}
        form={form}
        onClose={() => {
          setModalVisible(false);
          setEditingUser(null);
          form.resetFields();
        }}
        onFinish={handleSubmit}
      />
    </div>
  );
};

export default UserManagement; 